<script setup lang="ts">
import { getArticleListAPI } from '@/services/consult'
import type { ParamsConfig, TypeArticle, rowsData } from '@/types/consult'
import { ref } from 'vue'
import ArticleItem from './ArticleItem.vue'
const loading = ref(false)
const finished = ref(false)
// 触底下拉加载
const list = ref<rowsData[]>([])
const props = defineProps<{
  type: string
}>()
// 请求配置参数
const paramsConfig = ref<ParamsConfig>({
  type: props.type as TypeArticle,
  current: 1,
  pageSize: 10
})
// 总页数
const pageTotal = ref(0)
// 总条数
const total = ref(0)
const onLoad = async () => {
  // 发送请求，获取数据
  const data = await getArticleListAPI(paramsConfig.value)
  pageTotal.value = data.data.pageTotal
  total.value = data.data.total
  list.value.push(...data.data.rows)
  loading.value = false
  // 判断数据是否请求完成
  if (paramsConfig.value.current * paramsConfig.value.pageSize >= total.value) {
    // 请求完成
    finished.value = true
  } else {
    // 页面自增
    paramsConfig.value.current++
  }
}
</script>

<template>
  <div class="article-list-page">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      offset="50"
      @load="onLoad"
    >
      <article-item
        v-for="(item, index) in list"
        :key="index"
        :item="item"
      ></article-item>
    </van-list>
  </div>
</template>

<style lang="scss" scoped></style>
